<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
		<!--操作DOM-->
		<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
		<!--支持es6写法-->
		<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
		<title></title>
		<style type="text/css">
			.active{
				width:100px;
				height:200px;
				background-color: olivedrab;
				color:#fff;
				margin-left:100px;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
	</body>
	
	<script type="text/babel">
		
		var styleObj={
			width:"100px",
			height:"100px",
			border:"1px solid pink"
			
		}
		
		
//	ReactDOM.render(
//		<div className="active">
//		   <h1>we are family!</h1>
//		</div>,
//	 document.getElementById('app')
//	)
	
//	ReactDOM.render(
//		<div style={styleObj}>
//		   <p>we are family!</p>
//		</div>,
//	 document.getElementById('app')
//	)
ReactDOM.render(
		<div style={{width:"100px",height:"100px",
		border:"1px solid red"}}>
		   <p>we are family!</p>
		</div>,
	 document.getElementById('app')
	)


	</script>
</html>
